<template>
  <div class="dragList">
    <div class="dragList-list1">
      <h3 style="text-align: center">标签选择</h3>
    </div>

    <div class="dragList-list2">
      <h3 style="text-align: center">拖动至此处</h3>
      <Draggable
        :list="fileList"
        item-key="id"
        :group="{ name: 'article', pull: '' }"
        :disabled="false"
        @start="start2"
        @end="end2"
        class="dragArea2"
      >
        <template #item="{ element, index }">
          <div class="list-complete-item2">
            <!-- <img
              class="list-complete-item-handle2"
              :src="element.url"
              style="width: 150px; height: 150px"
            /> -->
            <el-image
              style="width: 130px; height: 150px"
              :src="element.url"
              :preview-src-list="[element.url]"
              :initial-index="0"
              fit="cover"
            >
            </el-image>
            <span class="drag-item-name">{{ element.name }}</span>
            <div>
              <PopConfirm>
                <template #default>
                  <el-button
                    @click="handleDel(index, element)"
                    class="delete-item"
                    type="danger"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </PopConfirm>
              <!-- <el-button
                @click="handleDel(index, element)"
                class="delete-item"
                type="danger"
                size="small"
                >删除</el-button
              > -->
            </div>
          </div>
        </template>
      </Draggable>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, watch, toRefs, computed } from "vue";
// import { useStore } from "@/store";
import { PopConfirm } from "@/components/popConfirm";
import { useStore } from "vuex";
import Draggable from "vuedraggable";
const store = useStore();

const fileList = computed(() => store.state.modulePicUpload.picList);

watch(fileList, (n, o) => {
  console.log("传递改变:", n, o);
});
const list1 = ref(fileList);
const disabled = ref(false);
const list11 = reactive([]);

const end1 = (ev) => {
  console.log("拖动结束1", ev);
};
const start2 = (event) => {
  console.log("开始拖动", event);
};
const end2 = (ev) => {
  console.log("拖动结束2", ev);
};
const handleDel = (index, id) => {
  console.log("删除:", index, id);
  return;
  store.commit("modulePicUpload/removePic", index);
};
</script>

<style lang="less" scoped>
.dragList {
  width: 100%;
  height: auto;
  min-height: 200px;
  padding: 20px;
  margin-bottom: 100px;
}
.dragList-list1 {
  width: 120px;
}
.list-complete-item1 {
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  display: inline-block;
  margin-bottom: 5px;
  width: 160px;
  height: 170px;
  line-height: 30px;
  border: 1px solid #bfcbd9;
  transition: all 1s;
}
.dragArea1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dragList-list2 {
  margin-top: 20px;
  height: 200px;
  height: auto;
  padding: 10px;
  width: 95%;
  // word-wrap: break-word;

  // word-break: normal;
  // border: 1px solid #8a8a8a;
}
.dragArea2 {
  display: flex;
  align-items: center;
  background: black;
  flex-wrap: wrap;
}
.list-complete-item2 {
  cursor: pointer;
  font-size: 14px;
  padding: 0 6px;
  display: inline-block;
  margin: 10px;
  width: 162px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #bfcbd9;
  transition: all 1s;
  position: relative;
  .delete-item {
    color: #fff;
    cursor: pointer;
  }
  .drag-item-name {
    position: absolute;
    top: 60%;
    color: red;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
  }
}
</style>
